<template>
  <div>
    <template v-if="type == 'abstract'">
      <template v-if="showShort">
        <span v-html="sliceContent(content, maxWordCount)" />
      </template>
      <template v-else>
        <span v-html="content" />
      </template>
    </template>
    <template v-else>
      <template v-if="showShort">
        <template v-if="Array.isArray(content)">
          <div v-html="content.join('').slice(0, maxWordCount) + '...'" />
        </template>
        <template v-else>
          <div v-html="content.slice(0, maxWordCount) + '...'" />
        </template>
      </template>
      <template v-else>
        <template v-if="Array.isArray(content)">
          <!-- Arr -->
          <template v-for="item in content">
            <template v-if="item == '\<el-divider>\</el-divider>'">
              <el-divider :key="item" />
            </template>
            <template v-else-if="'file' === contentType">
              <el-link class="file-link" type="primary" @click="handleDown(item)">{{ item }}</el-link>
            </template>
            <template v-else>
              <b :key="item" v-html="item" />
            </template>
          </template>
        </template>
        <template v-else>
          <!-- String -->
          <b v-html="content" />
        </template>
      </template>
    </template>
    <span v-show="isShowButton()" class="show-more" @click="toggleContent">
      <i class="el-icon--right">
        <el-icon>
          <template v-if="buttonLabel == '查看全部'">
            <i-ep-arrow-down />
          </template>
          <template v-else>
            <i-ep-arrow-up />
          </template>
        </el-icon>
      </i>
      {{ buttonLabel }}
    </span>
  </div>
</template>

<script>
import { downloadFile } from "@/api/ai";

export default {
  props: {
    content: {
      type: [String, Array]
    },
    maxWordCount: {
      type: Number,
      default: 300
    },
    baseShowShort: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: "text"
    },
    contentType: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      showShort: false,
      showButton: false,
      buttonLabel: "查看全部"
    };
  },
  mounted() {
    if (this.baseShowShort) {
      this.showShort = false;
      this.buttonLabel = "收起";
    } else {
      this.showShort = true;
    }
  },
  methods: {
    toggleContent() {
      this.showShort = !this.showShort;
      if (this.showShort) {
        this.buttonLabel = "查看全部";
      } else {
        this.buttonLabel = "收起";
      }
    },
    sliceContent(content, maxWordCount) {
      let _con = content;
      if (Array.isArray(content)) {
        _con = content.join("");
      }

      _con = _con.length > maxWordCount ? `${_con.slice(0, maxWordCount)}...` : _con;
      return _con;
    },
    isShowButton() {
      if (Array.isArray(this.content)) {
        const len = this.content.join("").length;
        if (len > this.maxWordCount) {
          return true;
        }
      } else {
        if (this.content.length > this.maxWordCount) {
          return true;
        }
      }
      return false;
    },
    handleDown(name) {
      downloadFile({ name }).then((res) => {
        const blob = new Blob([res], { type: "application/octet-stream" });
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = url;
        link.download = name;
        link.click();
        window.URL.revokeObjectURL(url);
      });
    }
  }
};
</script>
